<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{background-color: #8EC5FC;
            background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
            margin: 0 0 0 0 ;
            color: white;
        }
        body>header>div{
            background-color: blueviolet
        }
        h2{
            margin: 0 0 0 0 ;
            font-size: 60px;
            font-family: 宋体;
            color: white;
            background-color: #3e4963;
        }

        a{
            font-size: 30px;
            color: #433333;
            float: left;
            margin-left: 150px;
            list-style-type: none;/*去掉图标*/
            text-decoration: 0;
        }
    </style>
</head>
<body>
<header>
    <div style="width: 100%;height: 120px;background-color: #D9AFD9;background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);" >
        <h2><div style="/*left: 500px;padding-left: 780px*/">时光卷轴</div></h2>
        <div style="width: 1920px;" >
            <div v-show=" user=='' " style="float: left">
                <a href="/reg.html">注册</a>
                <a href="/login.html">登录</a>
            </div>
            <div v-show=" user!='' " style="float: left">
                <a href="">推送时光</a>
                <a href="">我的时间叶</a>
                <a href="javascript:void (0)" @click="logout">退出登录</a>
                <p style="font-size: 30px;">用户:{{user.nick}}</p>
            </div>
            <div style="font-size: 30px"><a href="/">慈善</a></div>

        </div>
    </div>
</header>
<!--引入Vue和axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let  herder_v = new Vue({
        el:"div",
        data:{
            user:"",
        },
        created:function (){
            axios.get("/currentUser").then(function (response){
                herder_v.user = response.data;
            })
        },
        methods:{
            logout:function (){
                axios.get("/logout").then(function (){
                    if (confirm("您确定退出吗?")){
                        location.reload();
                    }
                })
            }
        }
    })
</script>





<section>

</section>












<footer>

</footer>

</body>
</html>
